<template>
  <el-table
    :data="tableData"
    :stripe="stripe"
    :border="tableBorder"
    :height="tableHeight"
    :size="tableSize"
    :fit="tableFit"
    :empty-text="emptyText"
    :highlight-current-row="highlightCurrentRow"
  >
    <el-table-column v-if="selectionCol" type="selection" width="55"></el-table-column>
    <el-table-column type="index" v-if="indexCol"></el-table-column>
    <el-table-column
      v-for="(item) in columnData"
      :key="item.name"
      :prop="item.prop"
      :label="item.label"
      :width="item.width"
      :fixed="item.fixed"
    ></el-table-column>
    <el-table-column label="操作" v-if="operationCol">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'Table',
  data () {
    return {
      index: '',
      row: {}
    }
  },
  props: {
    tableData: {
      // 表格内数据
      type: Array,
      default () {
        return []
      }
    },
    columnData: {
      // 表头信息
      type: Array,
      default () {
        return []
      }
    },
    stripe: {
      // 是否为斑马纹 table
      type: Boolean,
      default: false
    },
    tableBorder: {
      // 是否带有纵向边框
      type: Boolean,
      default: false
    },
    tableHeight: {
      // 设置表格高度，使表头固定
      type: [String, Number],
      default: '200px'
    },
    tableSize: {
      // Table 的尺寸(medium,small,mini)
      type: String,
      default: 'medium'
    },
    tableFit: {
      // 列的宽度是否自撑开
      type: Boolean,
      default: true
    },
    emptyText: {
      // 空数据时显示的文本内容
      type: String,
      default: '暂无数据'
    },
    operationCol: {
      // 是否显示操作列
      type: Boolean,
      default: false
    },
    indexCol: {
      // 是否使用自定义索引列
      type: Boolean,
      default: false
    },
    selectionCol: {
      // 是否显示选择列
      type: Boolean,
      default: false
    },
    highlightCurrentRow: {
      // 是否要高亮当前行
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 监听编辑事件，返回索引值和行对象
    handleEdit: function (index, row) {
      console.log(index)
    },
    handleDelete: function (index, row) {
      this.tableData.splice(index, 1)
    }
  }
}
</script>

<style scoped>
el-table {
  overflow: auto;
}
</style>
